// 生命周期演示组件2----更新期、销毁期
import React, {Component} from 'react';
export default class LifeCircle2 extends React.Component {
  constructor() {
    super();
    this.state = {
      msg: 'hello'
    }
    this.change = function () {
      this.setState({
        msg: 'Hi'
      })
    }
  }
  // 组件即将接受新的Props
  // 需要父组件传过来的值发生变化才会触发
  componentWillReceiveProps(nextProps) {
    console.group('componentWillReceiveProps：组件即将接受Props');
    console.log(this.props);
    console.log(nextProps);
    console.groupEnd()
  }

  // 组件更新判断，是否更新？？
  shouldComponentUpdate(nextProps, nextState) {
    console.group('shouldComponentUpdate: 组件更新判断');
    console.log(nextProps);
    console.log(nextState);
    console.groupEnd();
    // 这里可以加更新的条件
    return true
  }

  // 组件即将更新
  componentWillUpdate(nextProps, nextState) {
    console.group('componentWillUpdate: 组件即将更新');
    console.log(nextProps);
    console.log(nextState);
    console.groupEnd();
  }
  // 组件更新完成
  componentDidUpdate(preProps, preState) {
    console.group('componentDidUpdate: 组件更新完成');
    console.log(preProps);
    console.log(preState);
    console.groupEnd();
  }
  // 组件即将被销毁
  componentWillUnmount() {
    console.log('componentWillUnmount：组件即将被销毁');
  }

  // 渲染安装
  render() {
    console.group('render：组件正在安装-渲染');
    console.groupEnd()
    return (<div className="border">
      <p>外部的值：{this.props.info}</p>
      <p>内部的值：{this.state.msg}</p>
      <button onClick={this.change.bind(this)}>更新</button>
    </div>)
  }
}